<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handSelect"
    >
      <el-sub-menu :index="item" v-for="item in Object.keys(menuList)" :key="item">
        <template #title>
          <span>{{ menuList[item].name }}</span>
        </template>
        <el-menu-item :index="ele" v-for="ele in Object.keys(menuList[item].role)" :key="ele">{{
          menuList[item].role[ele]
        }}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import { ROUTER_ENUM, routerPath } from '@/router/utils/routeMenu'
import { routerSave } from '@/utils/routerConfig'
import { sessionGet } from '@/utils/sessionStorage'
import { ref } from 'vue'

const menuList = ref({} as any)

const getMeun = () => {
  menuList.value = sessionGet('menu')
}
const handSelect = (value: ROUTER_ENUM) => {
  router.push(routerPath[value])
  routerSave(value)
  console.log(value)
}
getMeun()
</script>
